<template>
    <div class="container">
        <el-tabs v-model="activeName">
            <el-tab-pane v-for="(item, index) in schoolList" :key="index" :label="item.name"
                         style="margin:0" class="etp">
                <div v-if="item.id === 1">
                    <div class="top">
                        <div class="one">
                            <el-input
                                class="els"
                                placeholder="请输入姓名"
                                v-model="query1.name"
                                clearable>
                            </el-input>
                        </div>
                        <div class="two">
                            <el-select v-model="query1.college" placeholder="请选择系名称" class="els">
                                <el-option v-for="item in colleges" :key="item" :label="item"
                                           :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="two">
                            <el-select v-model="query1.major" placeholder="请选择专业名称" class="els">
                                <el-option v-for="item in majors" :key="item" :label="item"
                                           :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="two">
                            <el-select v-model="query1.grade" placeholder="请选择所在年级" class="els">
                                <el-option v-for="item in grades" :key="item" :label="item"
                                           :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="two">
                            <el-select v-model="query1.violationType" placeholder="请选择违纪种类" class="els">
                                <el-option v-for="item in kinds" :key="item" :label="item"
                                           :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="two">
                            <el-select v-model="query1.role" placeholder="请选择违纪角色" class="els">
                                <el-option v-for="item in roles" :key="item" :label="item"
                                           :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="two">
                            <el-select v-model="query1.result" placeholder="请选择处分结果" class="els">
                                <el-option v-for="item in results" :key="item" :label="item"
                                           :value="item"></el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="one">
                            <el-input
                                class="els"
                                placeholder="请输入学号"
                                v-model="query1.studentId"
                                clearable>
                            </el-input>
                        </div>
                        <span class="time">录入时间：</span>
                        <div class="three">
                            <el-date-picker
                                v-model="query1.enterTimeArg"
                                type="month"
                                placeholder="选择月"
                                :style="{ border: 1}"
                                value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </div>
                        <div class="four">
                            <el-button type="primary" size="medium" @click="selects"
                                       :style="{width: '74px', display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#ffffff', borderColor: '#ffffff', backgroundColor: '#166aff'}">
                                查询
                            </el-button>
                        </div>
                        <div class="five">
                            <el-button plain size="medium" @click="update"
                                       :style="{width: '74px', display: 'flex', justifyContent: 'center', alignItems: 'center' ,color: '#166AFF', borderColor: '#166AFF'}">
                                重置
                            </el-button>
                        </div>
                        <div class="six">
                            <el-button plain size="medium" @click="showDialog6 = true"
                                       :style="{width: '102px', display: 'flex', justifyContent: 'center', alignItems: 'center' ,color: '#166AFF', borderColor: '#166AFF'}">
                                导出查询结果
                            </el-button>
                            <el-dialog :visible.sync="showDialog6" title="导出结果查询" custom-class="custom-dialog4">
                                <hr class="hr2">
                                <div class="image-container">
                                    <img src="../../../../assets/images/first/qq.png" class="centered-image" alt="">
                                    <div class="daochurenshu">当前导出人数</div>
                                    <div>
                                        <span class="changdu">{{items.length}}</span>
                                        <span class="daochurenshu">人</span>
                                    </div>
                                </div>
                                <hr class="hr2">
                                <span slot="footer" class="dialog-footer">
                                    <el-button type="primary" @click="downLoad"
                                               :style="{width: '74px', display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#ffffff', borderColor: '#ffffff', backgroundColor: '#166aff'}">
                                        导出
                                    </el-button>
                                    <el-button @click="showDialog6 = false">取消</el-button>
                                </span>
                            </el-dialog>
                        </div>
                    </div>
                    <div class="bo2">
                        <el-button plain size="medium" @click="beforeInsertData"
                            :style="{width: '133px', height: '36px', display: 'flex', justifyContent: 'center',
                            alignItems: 'center', color: '#166AFF', borderColor: '#166AFF'}"
                        >
                            <img src="../../../../assets/images/first/qq.png"
                                 :style="{display: 'inline-block', verticalAlign: 'middle'}" alt="">
                            <span :style="{verticalAlign: 'middle', marginLeft: '8px'}">新增违纪学生</span>
                        </el-button>
                    </div>
                    <el-dialog :visible.sync="showDialog" title="新增违纪学生" custom-class="custom-dialog">
                        <hr class="hr2">
                        <div class="onetext">学号：</div>
                        <input type="text" class="custom-inputone" v-model="quary.studentId">
                        <div class="twotext">违纪角色：</div>
                        <input type="text" class="custom-inputtwo">
                        <div class="twotext">违纪种类：</div>
                        <input type="text" class="custom-inputtwo" v-model="quary.violationType">
                        <div class="threetext">违纪行为摘要：</div>
                        <input type="text" class="custom-inputthree" v-model="quary.violationCategory">
                        <div class="threetext">违纪发生时间：</div>
                        <div class="custom-inputthree">
                            <el-date-picker
                                v-model="quary.happenTime"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </div>
                        <div class="threetext">违纪生效时间：</div>
                        <div class="custom-inputthree">
                            <el-date-picker
                                v-model="quary.effectiveTime"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </div>
                        <div class="fourtext">处分结果及期限：</div>
                        <el-select class="custom-inputfour" v-model="quary.result" filterable placeholder="请选择">
                            <el-option
                                v-for="item in results"
                                :key="item"
                                :label="item"
                                :value="item">
                            </el-option>
                        </el-select>
                        <input type="text" class="custom-inputfive"  v-model="quary.publishmentDuration">
                        <div class="twotext">录入人ID：</div>
                        <input type="text" v-model="quary.operatorAid" class="custom-inputsix"  disabled>
                        <div class="threetext">处分文件号：</div>
                        <input type="text" class="custom-inputthree" v-model="quary.vioId">
                        <el-button size="small" icon="el-icon-upload2" class="add" type="primary" @click="upload">导入</el-button>
                        <div class="kongbai"></div>
                        <hr class="hr2">
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="showDialog = false">取消</el-button>
                            <el-button type="primary" @click="insertData">提交</el-button>
                        </span>
                    </el-dialog>
                    <hr class="hr1">
                    <div class="bo3">
                        <!-- 动态渲染 DivComponent -->
                        <DivComponent :items="currentItems" ref="divComponent" @data-updated="fetchData" />
                        <!-- 分页组件 -->
                        <div class="pagination-container">
                            <el-pagination
                                background
                                layout="prev, pager, next, sizes, total, jumper"
                                :total="totalItems"
                                :page-size="itemsPerPage"
                                :current-page="currentPage"
                                :page-sizes="[5, 10, 15]"
                                @current-change="handlePageChange"
                                @size-change="handleSizeChange"
                            ></el-pagination>
                        </div>
                    </div>
                    <div class="bo4"></div>
                </div>
                <div v-if="item.id === 0">
                    <div class="top">
                        <div class="one">
                            <el-input
                                class="els"
                                placeholder="请输入姓名"
                                v-model="query2.name"
                                clearable>
                            </el-input>
                        </div>
                        <div class="two">
                            <el-select v-model="query2.college" placeholder="请选择系名称" class="els">
                                <el-option v-for="item in colleges" :key="item" :label="item"
                                           :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="two">
                            <el-select v-model="query2.major" placeholder="请选择专业名称" class="els">
                                <el-option v-for="item in majors" :key="item" :label="item"
                                           :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="two">
                            <el-select v-model="query2.grade" placeholder="请选择所在年级" class="els">
                                <el-option v-for="item in grades" :key="item" :label="item"
                                           :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="two">
                            <el-select v-model="query2.violationType" placeholder="请选择违纪种类" class="els">
                                <el-option v-for="item in kinds" :key="item" :label="item"
                                           :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="two">
                            <el-select v-model="query2.role" placeholder="请选择违纪角色" class="els">
                                <el-option v-for="item in roles" :key="item" :label="item"
                                           :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="two">
                            <el-select v-model="query2.result" placeholder="请选择处分结果" class="els">
                                <el-option v-for="item in results" :key="item" :label="item"
                                           :value="item"></el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="one">
                            <el-input
                                class="els"
                                placeholder="请输入学号"
                                v-model="query2.studentId"
                                clearable>
                            </el-input>
                        </div>
                        <span class="time">录入时间：</span>
                        <div class="three">
                            <el-date-picker
                                v-model="query2.enterTimeArg"
                                type="month"
                                placeholder="选择月"
                                :style="{ border: 1}"
                                value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </div>
                        <div class="four">
                            <el-button type="primary" size="medium"
                                       :style="{width: '74px', display: 'flex', justifyContent: 'center',
                                        alignItems: 'center', color: '#ffffff', borderColor: '#ffffff', backgroundColor: '#166aff'}">
                                查询
                            </el-button>
                        </div>
                        <div class="five">
                            <el-button plain size="medium"  @click="update"
                                       :style="{width: '74px', display: 'flex', justifyContent: 'center',
                                       alignItems: 'center' ,color: '#166AFF', borderColor: '#166AFF'}">
                                重置
                            </el-button>
                        </div>
                        <div class="six">
                            <el-button plain size="medium" @click="showDialog4 = true"
                                       :style="{width: '102px', display: 'flex', justifyContent: 'center',
                                        alignItems: 'center' ,color: '#166AFF', borderColor: '#166AFF'}">
                                导出查询结果
                            </el-button>
                            <el-dialog :visible.sync="showDialog4" title="导出结果查询" custom-class="custom-dialog4">
                                <hr class="hr2">
                                <div class="image-container">
                                    <img src="../../../../assets/images/first/qq.png" class="centered-image" alt="">
                                    <div class="daochurenshu">当前导出人数</div>
                                    <div>
                                        <span class="changdu">{{items2.length}}</span>
                                        <span class="daochurenshu">人</span>
                                    </div>
                                </div>
                                <hr class="hr2">
                                <span slot="footer" class="dialog-footer">
                                    <el-button type="primary" @click="downLoad2"
                                               :style="{width: '74px', display: 'flex', justifyContent: 'center',
                                                alignItems: 'center', color: '#ffffff', borderColor: '#ffffff', backgroundColor: '#166aff'}">
                                        导出
                                    </el-button>
                                    <el-button @click="showDialog4 = false">取消</el-button>
                                </span>
                            </el-dialog>
                        </div>
                    </div>
                    <hr class="hr1">
                    <div class="bo3">
                        <!-- 动态渲染 DivComponent -->
                        <DivComponent2 :items2="currentItems2" ref="divComponent" />
                        <!-- 分页组件 -->
                        <div class="pagination-container">
                            <el-pagination
                                background
                                layout="prev, pager, next, sizes, total, jumper"
                                :total="totalItems2"
                                :page-size="itemsPerPage2"
                                :current-page="currentPage2"
                                :page-sizes="[5, 10, 15]"
                                @current-change="handlePageChange2"
                                @size-change="handleSizeChange2"
                            ></el-pagination>
                        </div>
                    </div>
                    <div class="bo4"></div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import DivComponent from './DivComponent.vue'
import DivComponent2 from './DivComponent2.vue'
import {createVio, getAllVio, getAllVioNot, importVio} from '../../../../api/api'
import { exportVio, exportVio2, getMajor, getKind, getAcade } from '../../../../api/user'
import {mapGetters} from 'vuex'

export default {
  components: {
    DivComponent,
    DivComponent2
  },
  data () {
    return {
      query1: {
        studentId: '',
        name: '',
        major: '',
        grade: '',
        violationType: '',
        role: '',
        result: '',
        college: '',
        enterTimeArg: null
      },
      query2: {
        studentId: '',
        name: '',
        violationType: '',
        major: '',
        grade: '',
        role: '',
        result: '',
        college: '',
        enterTimeArg: null
      },
      quary: {
        vioId: '',
        studentId: '',
        violationType: '',
        violationCategory: '',
        happenTime: null,
        effectiveTime: null,
        publishmentDuration: '',
        result: '',
        operatorAid: ''
      },
      activeName: '0',
      schoolList: [
        {
          name: '违规违纪登记',
          id: 1
        },
        {
          name: '已解除',
          id: 0
        }
      ],
      colleges: [],
      majors: [],
      grades: ['大一', '大二', '大三', '大四'],
      kinds: [],
      roles: ['本科生'],
      results: ['警告', '严重警告', '记过', '留校察看', '开除学籍'],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '西安烤鸭'
        }
      ],
      value: '',
      value1: '',
      value2: '',
      currentPage: 1,
      itemsPerPage: 5,
      currentPage2: 1,
      itemsPerPage2: 5, // 每页显示的 div 数量
      items: [],
      items2: [],
      showDialog: false,
      showDialog4: false,
      showDialog6: false
    }
  },
  computed: {
    ...mapGetters({
      operatorId: 'user/getUserId'
    }),
    totalItems () {
      return this.items.length
    },
    currentItems () {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.items.slice(start, end)
    },
    totalItems2 () {
      return this.items2.length
    },
    currentItems2 () {
      const start = (this.currentPage2 - 1) * this.itemsPerPage2
      const end = start + this.itemsPerPage2
      return this.items2.slice(start, end)
    }
  },
  async created () {
    await this.fetchData()
  },
  methods: {
    async upload () {
      // 创建一个 input 元素
      let input = document.createElement('input')
      input.type = 'file'
      input.accept = '.xls, .xlsx' // 接受的文件类型，这里可以根据需要调整

      // 添加 change 事件监听器
      input.addEventListener('change', (event) => {
        let file = event.target.files[0]
        let formData = new FormData()
        formData.append('file', file)
        // 调用导入用户的方法
        this.importUsers(formData)
      })
      // 模拟点击 input 元素
      input.click()
      await this.fetchData()
    },
    importUsers (formData) {
      // 调用后端接口 '/api/importUsers' 上传并导入文件
      importVio(formData).then(response => {
        // 处理成功的响应，可以根据需要进行逻辑处理
        console.log('导入用户成功', response.data)
        // 可以根据需要刷新页面或者更新其他状态
      }).catch(error => {
        // 处理失败的响应，可以输出错误信息或者进行其他处理
        console.error('导入用户失败', error)
      })
      this.showDialog = false
      setTimeout(() => {
        this.update()
        this.selects()
      }, 500)
    },
    selects () {
      this.fetchData()
    },
    update () {
      this.query1.name = ''
      this.query1.role = ''
      this.query1.major = ''
      this.query1.kind = ''
      this.query1.college = ''
      this.query1.enterTime = null
      this.query1.grade = ''
      this.query1.result = ''
      this.query2.name = ''
      this.query2.role = ''
      this.query2.major = ''
      this.query2.kind = ''
      this.query2.college = ''
      this.query2.enterTime = null
      this.query2.grade = ''
      this.query2.result = ''
      this.fetchData()
    },
    async fetchData () {
      try {
        const res = await getAllVio(this.query1)
        if (res.data) {
          this.items = res.data.map(item => ({
            isEnable: item.isEnable,
            role: '本科生',
            content: `${item.name} 的 ${item.violationType}`,
            sname: item.name,
            fileno: item.vioId,
            result: item.result,
            major: item.major,
            sid: item.studentId,
            grade: item.grade,
            acade: item.college,
            kind: item.violationType,
            etime: new Date(item.enterTime),
            htime: new Date(item.happenTime),
            itime: new Date(item.effectiveTime),
            ctime: item.punishmentDuration,
            stime: new Date(item.unremindTime)
          }))
        } else {
          console.error('获取数据失败:', res.message)
        }
      } catch (error) {
        console.error('获取数据错误:', error)
      }
      try {
        const res2 = await getAllVioNot(this.query2)
        if (res2.data) {
          this.items2 = res2.data.map(item => ({
            isEnable: item.isEnable,
            role: '本科生',
            content: `${item.name} 的 ${item.violationType}`,
            sname: item.name,
            fileno: item.vioId,
            result: item.result,
            major: item.major,
            sid: item.studentId,
            grade: item.grade,
            acade: item.college,
            kind: item.violationType,
            etime: new Date(item.enterTime),
            htime: new Date(item.happenTime),
            itime: new Date(item.effectiveTime),
            ctime: item.punishmentDuration,
            stime: new Date(item.unremindTime)
          }))
        } else {
          console.error('获取数据失败:', res2.message)
        }
      } catch (error) {
        console.error('获取数据错误:', error)
      }
      try {
        const res = await getMajor()
        if (res.data) {
          this.majors = res.data
        } else {
          console.error('获取专业失败:', res.message)
        }
      } catch (error) {
        console.error('获取专业错误:', error)
      }
      try {
        const res = await getKind()
        if (res.data) {
          this.kinds = res.data
        } else {
          console.error('获取违纪类型失败:', res.message)
        }
      } catch (error) {
        console.error('获取违纪类型错误:', error)
      }
      try {
        const res = await getAcade()
        if (res.data) {
          this.colleges = res.data
        } else {
          console.error('获取学院失败:', res.message)
        }
      } catch (error) {
        console.error('获取学院错误:', error)
      }
    },
    async beforeInsertData () {
      this.showDialog = true
      this.quary.operatorAid = this.operatorId
    },
    async insertData () {
      try {
        const response = await createVio(this.quary)
        console.log('Insert success:', response.data)
        await this.fetchData()
        this.showDialog = false
        this.$message({
          message: '新增成功',
          type: 'success'
        })
      } catch (error) {
        console.error('Insert failed:', error)
        this.showDialog = true
      }
    },
    downLoad () {
      this.showDialog6 = false
      exportVio().then(res => {
        console.info(res)
        let blob = new Blob([res], {type: 'application/vnd.ms-excel'}) // 为blob设置文件类型，这里以.xlsx为例
        let url = window.URL.createObjectURL(blob) // 创建一个临时的url指向blob对象
        let a = document.createElement('a')
        a.href = url
        a.download = '违纪违规列表.xls'
        a.click()
        // 释放这个临时的对象url
        window.URL.revokeObjectURL(url)
        this.$message({
          message: '导出成功',
          type: 'success'
        })
      })
    },
    downLoad2 () {
      this.showDialog4 = false
      exportVio2().then(res => {
        console.info(res)
        let blob = new Blob([res], {type: 'application/vnd.ms-excel'}) // 为blob设置文件类型，这里以.xlsx为例
        let url = window.URL.createObjectURL(blob) // 创建一个临时的url指向blob对象
        let a = document.createElement('a')
        a.href = url
        a.download = '违纪违规列表-已解除.xls'
        a.click()
        // 释放这个临时的对象url
        window.URL.revokeObjectURL(url)
      })
    },
    handlePageChange (page) {
      this.currentPage = page
    },
    handleSizeChange (size) {
      this.itemsPerPage = size
      this.currentPage = 1 // 重置当前页码
    },
    handlePageChange2 (page) {
      this.currentPage2 = page
    },
    handleSizeChange2 (size) {
      this.itemsPerPage2 = size
      this.currentPage2 = 1 // 重置当前页码
    }
  }
}
</script>

<style>
.add {
    margin-left: 242px;
    background: #111111;
    height: 40px;
    margin-top: 30px;
    width: 98px;
}
.kongbai {
    background: #FFFFFF;
    height: 6px;
}
.dialog-footer {
    display: flex;
    justify-content: center;
    text-align: center;
}
.el-input--prefix .el-input__inner {
    width: 430px;
    height: 36px;
    border: 0 solid #dcdcdc;
    opacity: 1;
    background: #ffffffe6;
}
.custom-inputone {
    display: inline-block;
    margin-left: 43px;
    margin-top: 24px;
    width: 430px;
    height: 36px;
    border-radius: 3px;
    opacity: 1;
    border: 1px solid #dcdcdc;
    background: #ffffffe6;
}
.custom-inputtwo {
    display: inline-block;
    margin-left: 43px;
    margin-top: 16px;
    width: 430px;
    height: 36px;
    border-radius: 3px;
    opacity: 1;
    border: 1px solid #dcdcdc;
    background: #ffffffe6;
}
.custom-inputthree {
    display: inline-block;
    margin-left:21px;
    margin-top: 16px;
    width: 430px;
    height: 36px;
    border-radius: 3px;
    opacity: 1;
    border: 1px solid #dcdcdc;
    background: #ffffffe6;
}
.custom-inputfour {
    display: inline-block;
    margin-left:7px;
    margin-top: 16px;
    width: 203px;
    height: 39px;
    border-radius: 3px;
    opacity: 1;
    border: 0 solid #dcdcdc;
    background: #ffffffe6;
}
.custom-inputfive {
    display: inline-block;
    margin-left:10px;
    margin-top: 16px;
    width: 203px;
    height: 32px;
    border-radius: 3px;
    opacity: 1;
    border: 1px solid #dcdcdc;
    background: #ffffffe6;
}
.custom-inputsix {
    display: inline-block;
    margin-left: 43px;
    margin-top: 16px;
    width: 430px;
    height: 36px;
    border-radius: 3px;
    opacity: 1;
    border: 1px solid #dcdcdc;
    background: #ffffffe6;
}
.onetext {
    width: 69px;
    height: 22px;
    display: inline-block;
    margin-left: 24px;
    margin-top: 31px;
    color: #000000e6;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
}
.twotext {
    width: 69px;
    height: 22px;
    display: inline-block;
    margin-left: 24px;
    margin-top: 30px;
    color: #000000e6;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
}
.threetext {
    width: 91px;
    height: 22px;
    display: inline-block;
    margin-left: 24px;
    margin-top: 30px;
    color: #000000e6;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
}
.fourtext {
    width: 105px;
    height: 22px;
    display: inline-block;
    margin-left: 24px;
    margin-top: 30px;
    color: #000000e6;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
}
.custom-dialog hr.hr2 {
    width: 100%;
    height: 1px;
    margin: 0;
    border: none;
    background-color: #DCDCDC; /* 设置颜色为黑色 */
}
.custom-dialog4 hr.hr2 {
    width: 100%;
    height: 1px;
    margin: 0;
    border: none;
    background-color: #DCDCDC; /* 设置颜色为黑色 */
}
.el-dialog__header {
    padding-left: 24px;
    padding-top: 16px;
    height: 56px;
    font-size: 36px;
}
.custom-dialog .el-dialog__body {
    padding: 0; /* 调整顶部的内边距 */
}
.custom-dialog {
    width: 590px;
    height: 754px;
}
.custom-dialog4 {
    width: 590px;
    height: 287px;
}
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.daochurenshu {
    margin-top: 10px;
    color: #1a1a1a;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
}
.changdu {
    color: #1a1a1a;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
}
.centered-image {
    margin-top: 20px;
    width: 50px;
    height: 50px;
}
.custom-dialog4 .el-dialog__body {
    padding: 0;
}
.bo3 {
    margin-top: 0;
    margin-bottom: 30px;
    background: #ffffff;
}
.bo4 {
    height: 20px;
    background: #ffffff;
}
.pagination-container {
    height: 100px;
    position: absolute;
    left: 500px;
}

.container {
    min-width: 1666px;
    width: 100%;
    position: absolute;
    top: 64px;
    left: 26px;
    background: #ffffff;
}

.time {
    margin-left: 18px;
}

.top {
    width: 100%;
    height: 36px;
}

.one {
    margin-left: 18px;
    display: inline-block;
}

.two {
    margin-left: 11px;
    display: inline-block;
}

.three {
    margin-left: 0;
    display: inline-block;
}

.four {
    width: 74px;
    margin-left: 783px;
}

.five {
    width: 74px;
    margin-left: 8px;
}

.six {
    width: 102px;
    margin-left: 8px;
}

.bottom {
    align-items: center;
    width: 100%;
    height: 36px;
    margin-top: 10px;
    display: flex;
}

.bo2 {
    width: 133px;
    height: 36px;
    margin-left: 23px;
    margin-top: 20px;
    margin-bottom: 16px;
}

hr.hr1 {
    background: rgb(246 246 246);
    height: 3px;
    border: none;
}

.els {
    width: 211px; /* 自定义宽度 */
}

.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2), .el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 25px;
}

.el-input--suffix .el-input__inner {
    height: 36px;
}

.el-input--prefix .el-input__inner {
    width: 211px;
    height: 36px;
    border: 1px solid #dcdcdc;
    opacity: 1;
    background: #ffffffe6;
}
</style>
